<template>
    <div>
        <div class="container">
            <el-row :gutter="21">
                <el-col :span="5"><div class="text">账户总金额：{{account.fkyye+account.fdjje}}元</div></el-col>
                <el-col :span="5"><div class="text">账户冻结金额：{{account.fdjje}}元</div></el-col>
                <el-col :span="5"><div class="text">账户可用余额：{{account.fkyye}}元</div></el-col>
                <el-col :span="3"><el-button class="filter-item" @click="Visible = true" type="primary">充值</el-button></el-col>
                <el-col :span="3"><el-button class="filter-item" @click="Visibleadd = true" type="primary">提现</el-button></el-col>
            </el-row>
        </div>
        <el-dialog title="充值" :visible.sync="Visible" center>
            <el-form :model="form">
                <el-form-item label="充值金额" :label-width="formLabelWidth">
                <el-input v-model="form.czje" placeholder="请输入充值金额"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visible = false">取 消</el-button>
                <el-button type="primary" @click="btn1()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="提现" :visible.sync="Visibleadd" center>
            <el-form :model="form">
                <el-form-item label="提现申请金额" :label-width="formLabelWidth">
                <el-input v-model="form.txJe" placeholder="请输入提现申请金额"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visibleadd = false">取 消</el-button>
                <el-button type="primary" @click="btn2()">确 定</el-button>
            </div>
        </el-dialog>
        <div class="filter-container">
            <div class="version">充值提现记录</div>
        </div>
        <el-table :data="list" border fit highlight-current-row style="width: 100%;">
            
            <el-table-column align="center" label="时间">
                <template slot-scope="scope">
                <span>{{scope.row.jysj}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                <span>{{scope.row.jylx}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="充值编号">
                <template slot-scope="scope">
                <span>{{scope.row.czbh}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="提现编号">
                <template slot-scope="scope">
                <span>{{scope.row.txbh}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="交易流水">
                <template slot-scope="scope">
                <span>{{scope.row.jyls}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="金额/元">
                <template slot-scope="scope">
                <span>{{scope.row.jyje}}</span>
                </template>
            </el-table-column>
             <el-table-column align="center" label="审核状态">
                <template slot-scope="scope">
                <span>{{scope.row.shzt}}</span>
                </template>
            </el-table-column>
             <el-table-column align="center" label="手续费" width="180" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
                    <span>{{scope.row.jyfy}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="审核原因">
                <template slot-scope="scope">
                <span>{{scope.row.reject}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.currentPage" :page-sizes="[5,10,20,30,40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
        userId: JSON.parse(localStorage.getItem("userInfo")).userId,
        currentPage: 1,
        pageSize: 10,
      },
      account: {
          fdjje: 0,
          fkyye: 0
      },
      Visibleadd: false,
      Visible: false,
      formLabelWidth: '120px',
      form: {
        // id: '',
        txJe: '',
        czje:''
      },
    }
  },
  created() {
    this.getList()
    this.getAccount()
  },
  methods: {
      btn1(){
           var that = this
          that.$post({
            api: "/account/accountCz",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                czje: that.form.czje
            }
            }).then(({ data }) => {
                if(data.code === 0){
                    that.Visible = false
                    that.getList()
                    that.getAccount()
                    that.$notify({
                        title: '成功',
                        message: '已提交申请',
                        type: 'success',
                        duration: 2000
                    })
                }
                else{
                    this.$confirm('请您先设置银行卡账户', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                       this.$router.push({
                            path: '/bankCard'
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });          
                    });
                }
                console.log("accountCz",data)
            });
      },
      btn2(){
           var that = this
          that.$post({
            api: "/account/accountTx",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                txJe: that.form.txJe
            }
            }).then(({ data }) => {
                if(data.code === 0){
                    that.Visibleadd = false
                    that.getList()
                    that.getAccount()
                    that.$notify({
                        title: '成功',
                        message: '已提交申请',
                        type: 'success',
                        duration: 2000
                    })
                }
                 else{
                    this.$confirm(data.msg, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                       this.$router.push({
                            path: '/bankCard'
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });          
                    });
                }
                console.log("accountTx",data)
            });
      },
    getList(){
      var that = this
      that.$post({
            api: "/account/accountCzTxJl",
            data: that.listQuery
        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data.list
            that.total = data.data.total
        }
        console.log("accountCzTxJl",data)
        });
    },
    getAccount(){
      var that = this
      that.$post({
            api: "/account/accountMoney",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
            }
        }).then(({ data }) => {
        if(data.code === 0){
            if(data.data) {
              that.account = data.data
            }
        }
        console.log("accountMoney",data)
        });
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    
  }
}
</script>

<style lang="scss" scoped>
.text{
    line-height: 40px;
}
.version{
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-indent: 20px;
  font-weight: 550;
  border-left: 4px #2277ff solid;
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>

